<template>
  <div class="account-info">
    <div>
      <h2 class="t1">我的额度</h2>
      <div class="count">
        <div class="quota_list">
          <div class="quota_item">
            <img src="@img/recharge/used-recharge.png" alt="" />
            <p class="used">已使用：<span>{{ accountQuota.usedQuota }}</span></p>
          </div>
          <div class="quota_item">
            <img src="@img/recharge/total-recharge.png" alt="" />
            <p class="used">总额：<span>{{ accountQuota.totalQuota }}</span></p>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="t1">记录</div>
      <div class="scroll" ref="scrollRef">
        <div :style="{height: itemHeight * accountList.length + 'px'}"></div>
        <div class="list-wrapper" :style="{top: top + 'px'}">
          <div
            class="item"
            v-for="item in showList"
            :key="item.id"
            :style="{height: itemHeight + 'px'}"
          >
            <span>{{ item.serialNumber }}</span>
            <span>{{ item.consumption }}</span>
            <span>{{ item.updated }}</span>
            <span>{{ item.type ? '消耗' : '充值' }}</span>
            <span>{{ item.remarks }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { type IAccountQuotaData, type IAccountItem, getAccountQuota, getAccount } from '@api/user'

let accountQuota = reactive<Partial<IAccountQuotaData>>({})
let accountList = ref<IAccountItem[]>([])
let moniRes = ref([]) // 模拟的数据
let itemHeight = ref<number>(50) // 列表每一项的高度
let top = ref<number>(0) // 当前滚动的距离
let showNum = ref<number>(0) // 列表项的数量
let scrollRef = ref<HTMLElement | null>(null) // 存储当前需要展示的虚拟列表项
let showList = ref<IAccountItem[]>([]) // 存储当前需要展示的虚拟列表项

onMounted( async () => {
  // 模拟1000条数据
  moniRes.value = Array.from({ length: 1000 }, (_, index) => ({
    id: index + 1,
    serialNumber: `流水号：${index + 1}； `,
    consumption: Math.floor(Math.random() * 100) + '； ',
    updated: new Date().toLocaleDateString(),
    type: Math.random() > 0.5 ? 1 : 0,
    remarks: `备注信息：${ index + 1 }`
  }))
  let res = await getAccountQuota()
  Object.assign(accountQuota, res.data)
  let listRes = await getAccount({
    page: 1,
    pagesize: 100
  })
  // accountList.value = listRes.data.items
  accountList.value = moniRes.value
  // 计算可视区域内列表项的数量
  let total = window.getComputedStyle(scrollRef.value).getPropertyValue('height')
  showNum.value = Math.ceil(parseFloat(total) / itemHeight.value)
  // 初始化渲染列表
  showList.value = accountList.value.slice(0, showNum.value)
  // slice 开始索引和结束索引，后不包，不改变原数组
  // 监听列表的滚动事件
  scrollRef.value?.addEventListener('scroll', handleScroll)
})
// 滚动事件的回调函数
const handleScroll = (e: Event) => {
  // console.log(e.target.scrollTop)
  // 计算开始的下标，不小于0
  let startIndex = Math.max(Math.floor(e.target.scrollTop / itemHeight.value), 0)
  console.log('str:', startIndex)
  // 计算结束的下标，不能超过列表数据的最大数量
  let endIndex = Math.min(startIndex + showNum.value, accountList.value.length)
  // 更新列表
  showList.value = accountList.value.slice(startIndex, endIndex)
  top.value = startIndex * itemHeight.value
}
</script>
<style lang="scss" scoped>
.account-info {
  height: 604px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  padding: 23px 30px;
  h2.t1 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 15px;
    color: #232323;
  }
  .cont {
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #dbdbdb;
    padding: 0 28px;
  }
  .quota_list {
    display: flex;

    .quota_item {
      display: flex;
      align-items: center;
      margin-right: 60px;
      img {
        width: 19px;
        width: 19px;
        margin-right: 2px;
      }

      p {
        font-size: 14px;
        color: #232323;

        span {
          &.used {
            color: #ff3a3a;
          }

          &.total {
            color: #3ab7ff;
          }
        }
      }
    }
  }
  .scroll {
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #dbdbdb;
    height: 314px;
    color: #232323;
    position: relative;
    overflow-y: scroll;
  }
  .list-wrapper {
    position: absolute;
    left: 0;
    .item {
      display: flex;
      align-items: center;
    }
  }
}
</style>
